<!--
 * @Project: 
 * @Remark: 
 * @Author: shaoyuan
 * @Date: 2023-04-19 19:43:59
 * @LastEditors: shaoyuan
 * @LastEditTime: 2023-04-19 23:52:15
 * @FilePath: \logicflow-vue3-ts-vite\src\components\LayoutFlow.vue
-->
<template>
    <div class="layout-flow">
        <a-tabs class="layout-tabs" v-model:activeKey="activeKey">
            <a-tab-pane tab="轻量简洁" key="1">
                <BrevityFlow />
            </a-tab-pane>
            <a-tab-pane tab="一键美化" key="2">
                <BeautifyFlow />
            </a-tab-pane>
            <a-tab-pane tab="树形流程图" key="3">
                <MindMapFlow />
            </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script lang="ts" setup>
import { ref } from "vue"
import BrevityFlow from "./BrevityFlow.vue"
import BeautifyFlow from "./BeautifyFlow.vue"
import MindMapFlow from "./MindMapFlow.vue"

const activeKey = ref("3")
</script>
<style scoped>
.layout-flow {
    width: 1200px;
    margin: 20px auto;
}
</style>
